<style>
  .btn {
    color: #00aaee;
    cursor: pointer;
  }
  .text-left{
    text-align: left;
  }
  .cell-bl-1{
    flex: 1;
  }
  .cell-bl-2{
    flex: 2;
  }
  .cell-bl-3{
    flex: 3;
  }
  .cell-bl-4{
    flex: 4;
  }
</style>
<template>
  <main>
    <h4 class="title is-4 text-left"><b>页头页脚配置</b></h4>
    <section class="box">
      <article @click="modify('header')">
        <div v-html="header.html"></div>
        <div class="leftmenu"><img src="../../assets/img/menu.png"/></div>
        <p class="logo"><img src=""/></p>
        <div class="leftnav">
          <div class="dis_btn"><img src="../../assets/img/error.png"/></div>
          <div class="fisrt_nav" id="nav"></div>
          <div class="bac2"></div>
        </div>
      </article>
    </section>
    <section class="box">
      <article @click="modify('footer')">
        <div class="clearfix" style="background:#373945;color: #fff">
          <div class="boxs" style="max-width: 1000px;padding: 20px;">
            <div class="cell-bl-3 text-left">
              邮政编码：{{footer.num}}
              <br>联系方式：{{footer.telephone}}
              <br>传真：{{footer.fax}}
              <br>E-mail: {{footer.email}}
            </div>
            <div class="cell-bl-2 text-center"><img
              style="display:block;max-width: 80px;height: 80px; background:#fff;margin: 20px auto 5px"
              src="">微信公众号</div>
          </div>
        </div>
        <p class="text-center">{{footer.copyright}}</p>
        <p class="text-center">{{footer.code}}</p>
      </article>
    </section>
  </main>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  export default {
    data () {
      return {
        list: [
          {name: 'Karyn Holmberg', type: 'Drums'},
        ],
        header:{
          logo:'',
          html:''
        },
        footer:{
          email:'',
          telephone:'',
          code:'沪ICP备13021769',
          fax:'',
          ewx:'',
          copyright:'Copyright 2016 YaDuo Resort All Rights Reserved',
          num:'',
          html:''
        },
        param: {name: 'Karyn Holmberg', type: 'Drums'},
      }
    },
    methods: {
      ...mapActions([
        'toggleSidebarls',
      ]),
      modify (type) {
        this.toggleSidebarls(false)
        let vm = this
        this.$parent.$parent.$refs.sides.updatePage(vm.header,type)
        this.$http.get('cms/api/websites/89060613317206016/'+type+'s',vm[type]).then(function(res){
//          vm[type] = res.data
        })
      },
      setModal (data,type) {
        let vm = this
        this.$http.put('cms/api/websites/89060613317206016/'+type+'s',data).then(function(res){
          vm[type] = res.data
        })
      }
    },
    computed:  mapGetters({
      sidebarl: 'sidebarl'
    }),
    components: {},
    mounted () {
        this.$parent.$parent.$refs.nav.status = false
    }
  }
</script>
